<template>
  <div class="main" ref="bigbox">
    <div class="serbox">
      <el-date-picker
        v-model="choDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
      <div class="inp">
        <el-input placeholder="请输入订单编号" v-model="searchText"> </el-input>
      </div>
      <el-button
        type="primary"
        style="margin-left: 15px"
        size="medium"
        @click="search"
        >查询</el-button
      >
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="orderSn" label="订单编号"> </el-table-column>
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.imgurl" class="img" />
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
        <el-table-column prop="specName" label="规格"> </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="total" label="数量"> </el-table-column>
        <el-table-column prop="createAt" label="下单时间"> </el-table-column>
        <el-table-column label="扣除优惠">
          <template slot-scope="scope">
            <span>￥{{ scope.row.couponMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到账金额">
          <template slot-scope="scope">
            <span style="color: #d94511">￥{{ scope.row.payment }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作"
                         width="60">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
                       type="text"
                       size="small">详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="page">
      <div class="btns"></div>
      <el-pagination
        background
        @current-change="changePage"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total,prev,pager,next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="开票详情" :visible.sync="pop" width="50%">
      <el-form label-width="80px" :model="popform">
        <el-form-item label="订单编号">
          <el-input v-model="popform.orderSn" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <img :src="popform.img" class="popimg" />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="popform.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="popform.spec" disabled></el-input>
        </el-form-item>
        <el-form-item label="扣除优惠">
          <el-input v-model="popform.discounts" disabled></el-input>
        </el-form-item>
        <el-form-item label="到账金额">
          <el-input v-model="popform.money" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      choDate: "",
      searchText: "",
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      pop: false,
      popform: {
        orderSn: "12345678910",
        img: require("../../assets/img/tu.png"),
        name: "商品名称",
        spec: "规格参数",
        discounts: "152.00",
        money: "52.00",
      },
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.$postRequest("/mall/orderOrder/list", {
        shopId: sessionStorage.getItem("shopId"),
        orderSn: this.searchText,
        status: 0,
        beginAt: this.choDate[0],
        endAt: this.choDate[1],
        pageNum: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        this.total = res.total;
        this.tableData = res.rows;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].createAt = this.$util.gettime(
            new Date(res.rows[i].createAt)
          );
        }
      });
    },
    search() {
      if (this.choDate == null) {
        this.choDate = ["", ""];
      }
      this.getlist();
    },
    changePage(e) {
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
      this.getlist();
    },
    handleClick() {
      this.pop = true;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-button--text {
  color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #333;
}
.main {
  margin: 20px;
  background: #fff;
}
.serbox {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  .inp {
    width: 200px;
    margin-left: 20px;
  }
}
.table {
  margin: 20px;
  border: 1px solid #eee;
  .img {
    height: 50px;
    width: 50px;
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.popimg {
  height: 120px;
  width: 120px;
}
</style>